iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 8
0

菜菜菜的前端學習日誌 - Day8

transition 轉場

transition 是設置指定元素,在值改變時的轉場能夠透過設定加速度及時間產生不同的轉場效果。

而transition要怎麼設定以及會產生哪些效果呢?
就讓我們來看看吧~

transition屬性

transition有4個屬性能夠設定

  1. transition-property:設定要產生轉場效果的屬性,例如:color,font-size,width,height...等
  2. transition-duration:設定轉場效果的時間,以秒計算
  3. transition-timing-function:設定轉場效果的加速度,能夠設定的值如下
效果 示意圖
linear 從效果開始到結束以相同速度進行
ease 效果開始會先加速後再減速至效果結束
ease-in 效果開始會先以緩速開始後再微微加速至效果結束
ease-out 效果開始會先微微加速後在減速至效果結束
ease-in-out 效果開始時會先以緩速開始後加速在減速至效果結束
cubic-bezier(x,x,x,x) 貝茲曲線就能夠透過自訂參數來達到不同的加速度效果,甚至能夠產生超過結束點在回彈的效果
  1. transition-delay:設定轉場效果的延遲時間,在幾秒後才執行轉場效果

縮寫

而上述這些transition的屬性也能像background一樣縮寫,寫法如下:

transition:property duration timing-function delay

範例:

transition:color 1s linear 0.5s

我想要讓color在0.5s後以等速的變色,效果時間1s

觸發

而前面有說到,transition是某元素內屬性值改變的轉場效果
所以必須透過一些事件觸發來改變屬性的值
我們可以透過前面提到的偽類選擇器來改變屬性的值
下面就來看一些實際應用吧

Try It

先來寫一些簡單的練習

我們將一個DIV的背景設為黃色,然後設定他的transition是改變他的背景顏色
接下來透過hover來改變背景顏色為紅色

這就完成了第一個轉場效果呢

接下來在做一個複雜一點點兒的
我們來透過checkbox的偽類:checked來讓DIV能夠變大且變色

  • [ ] 但是我不喜歡checkbox的框框

所以我們來使用label跟checkbox綁定,然後讓label加點顏色吧

<input type="checkbox" id="test" class="changeColor">
<label for="test">Change</label>

先把checkbox加上id,接下來label使用for就可以跟checkbox綁定囉~

然後再把checkbox屬性設display: none;就看不到了,但是透過點擊label還是能夠讓checkbox被check呢!!

再來就是讓checkbox被check時選擇鄰近的兄弟DIV.test(前面有提到CSS選擇器),改變屬性的值就可以了。

成果就是這樣了~

接下來我們來玩一點不一樣的

有時會看到選單按鈕可以點擊展開,就讓我們來實做一下吧

首先先把html佈局好

跟上一個練習依樣,我們透過checkbox來控制其他DIV

接下來我們將label美化一下,並且把它定位一下

因為待會兒會把其他DIV藏在這個label的下面,所以用z-index把它的層級提高

再來把其他DIV共同要設定的屬性寫在同一個class

再來設定一下其他每個DIV的顏色跟延遲時間

最後最後就是設定DIV要移動的位置囉~

最後的成果就是這樣

是不是很好玩呢~~


上一篇
CSS選擇器
下一篇
Transform變形
系列文
菜菜菜的前端學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
kkdayy_55330
iT邦新手 5 級 ‧ 2019-07-10 21:47:21

不好意思我有照著實作最後一個複雜範例但是沒反應請問是哪裡有問題呢?

https://codepen.io/anon/pen/MMLpey

Andy Tsai iT邦新手 5 級 ‧ 2019-07-11 15:30:50 檢舉

https://ithelp.ithome.com.tw/upload/images/20190711/20107702VOFTRgQ1TQ.png

因為你 left 打成 25px 所以他跑去左邊了你沒有點到他,你把它改成 250px 就會成功囉

https://codepen.io/anon/pen/KjYdqe

了解,謝謝指導!

Andy Tsai iT邦新手 5 級 ‧ 2019-07-14 16:05:41 檢舉

不會喲

我要留言

立即登入留言